<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>药品管理</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.min.css"
          rel="stylesheet" type="text/css">
    <style type="text/css">
        #top{
            /*外边距*/
            margin-top: 20px;
            margin-left: 40px;
            margin-right: 40px;
        }
        #top_first{
            background-color: #e9ecef;
        }
        #top_second{
            background-color: #e9ecef;
        }
        #middle{
            margin-top: 20px;
            margin-left: 20px;
            margin-right: 20px;
        }
        #middle_head{
            background-color: #e9ecef;
        }
        #bottom{
            margin-top: 20px;
            margin-left: 20px;
            margin-right: 20px;
        }
        #delete{
            margin-left: 10px;
        }
       </style>
</head>
<body>
<div id="main">
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="#">菜单</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="Doctor.html">医生管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="medicine.html">药品管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Register.html">挂号管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link justify-content-end" href="login.html">退出</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="top">
        <form id="form">
            <!--            表格 表格边框-->
            <table class="table table-bordered">
                <tr>
                    <td width="100" id="top_first">药品名称:</td>
                    <td width="400">
                        <input type="text" name="medicineName">
                    </td>
                    <td width="100" id="top_second">药品类型:</td>
                    <td width="400">
                        <select name="medicineType">
                            <option value="-1">==查询所有==</option>
                            <option value="1">处方药</option>
                            <option value="2">中药</option>
                            <option value="3">西药</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" class="text-center">
                        <button type="button" id="Btnsearch" class="btn btn-sm btn-info">查询</button>
                        <button type="reset" class="btn btn-sm btn-info" onclick="init()">重置</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div id="middle">
        <form id="batchform">
        <table class="table table-bordered">
            <thead>
            <tr id="middle_head">
                <td>
                    <input type="checkbox" onclick="selectAll(this.checked)">
                </td>
                <td>药品编号</td>
                <td>药品名称</td>
                <td>药品类型</td>
                <td>简单描述</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
        </table>
        </form>
    </div>
    <div id="bottom" class="bg-muted clearfix">
        <!--        sm 制作一个小按钮-->
        <a class="btn btn-sm btn-success float-left" href="medicineAdd.html" role="button">添加新药</a>
        <button type="button" id="delete" class="btn btn-sm btn-success float-left" onclick="batchDelete()">批量删除</button>
    </div>
</div>

<!-- 详情Modal -->
<div class="modal fade" id="desModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="desModalLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="desForm">
                    <table class="table">
                        <tr>
                            <td width="100" class="bg-secondary">药品编号</td>
                            <td>
                                <input type="text" name="medicineId" id="desmedicineId">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">进价</td>
                            <td>
                                <input type="text" name="inPrice" id="desinPrice">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">售价</td>
                            <td>
                                <input type="text" name="salPrice" id="dessalPrice">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">数量</td>
                            <td>
                                <input type="text" name="mcount" id="desmcount">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">药品名称</td>
                            <td>
                                <input type="text" name="medicineName" id="desmedicineName">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">药品类型</td>
                            <td>
                                <input type="text" name="medicineType" id="desmedicineType">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">简单描述</td>
                            <td>
                                <input type="text" name="descs" id="desdescs">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">保质期</td>
                            <td>
                                <input type="text" name="qualityDate" id="desqualityDate">月
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">详细描述</td>
                            <td>
                                <input type="text" name="description" id="desdescription">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">生产厂商</td>
                            <td>
                                <input type="text" name="produceFirm" id="desproduceFirm">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">服用说明</td>
                            <td>
                                <input type="text" name="readme" id="desreadme">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">备注</td>
                            <td>
                                <input type="text" name="remark" id="desremark">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary text-center" data-dismiss="modal">返回</button>
            </div>
        </div>
    </div>
</div>

<!-- 更改Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editform">
                    <table class="table">
                        <tr>
                            <td width="100" class="bg-secondary">药品编号</td>
                            <td>
                                <input type="text" name="medicineId" id="editmedicineId">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">进价</td>
                            <td>
                                <input type="text" name="inPrice" id="editinPrice">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">售价</td>
                            <td>
                                <input type="text" name="salPrice" id="editsalPrice">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">数量</td>
                            <td>
                                <input type="text" name="mcount" id="editmcount">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">药品名称</td>
                            <td>
                                <input type="text" name="medicineName" id="editmedicineName">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">药品类型</td>
                            <td>
                                <select name="medicineType" id="editmedicineType">
                                    <option value="1">处方药</option>
                                    <option value="2">中药</option>
                                    <option value="3">西药</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">简单描述</td>
                            <td>
                                <input type="text" name="descs" id="editdescs">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">保质期</td>
                            <td>
                                <input type="text" name="qualityDate" id="editqualityDate">月
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">详细描述</td>
                            <td>
                                <input type="text" name="description" id="editdescription">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">生产厂商</td>
                            <td>
                                <input type="text" name="produceFirm" id="editproduceFirm">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">服用说明</td>
                            <td>
                                <input type="text" name="readme" id="editreadme">
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="bg-secondary">备注</td>
                            <td>
                                <input type="text" name="remark" id="editremark">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
                <button type="button" class="btn btn-primary" onclick="doEdit()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除提示框Modal -->
<div class="modal fade" id="delModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delModalLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                您确定要删除【<span id="delmedicineName"></span>】吗?
                <form id="delForm">
                    <input type="hidden" id="delmedicineId" name="ids">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doDelete()">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script>
    function init() {
        let TYPE=['','处方药','中药','西药'];
        let form=jQuery("#form").serialize();
        jQuery.post("medicine/search",form,function (rst) {
            let trs=' ';
            for(let i=0;i<rst.length;i++) {
                let u = rst[i];
                trs += `
                        <tr>
                            <td>
                                <input type="checkbox" name="ids" value="${u.medicineId}">
                            </td>
                            <td>${u.medicineId}</td>
                            <td>${u.medicineName}</td>
                            <td>${TYPE[u.medicineType]}</td>
                            <td>${u.descs}</td>
                            <td>${u.mcount}</td>
                            <td>
                                <a href="#" onclick='showdelDialog(${JSON.stringify(u)})'>删除</a>
                                <a href="#" onclick='showEditDialog(${JSON.stringify(u)})'>更改</a>
                                <a href="#" onclick='showDesDialog(${JSON.stringify(u)})'>详情>>></a>
                            </td>
                        </tr>
                    `;
            }
            if (rst.length == 0) {
                trs = `<tr>
                             <td colspan="6" class="text-center">没有数据</td>
                        </tr>`;
            }
            jQuery("#tbody").html(trs);
        })
    }
</script>
<script>
    jQuery(function () {
        jQuery("#Btnsearch").click(function () {
            init();
        });
    })
</script>
<script>
    function showDesDialog(u) {
        let TYPE=['','处方药','中药','西药'];
        jQuery("#desmedicineId").val(u.medicineId);
        jQuery("#desinPrice").val(u.inPrice);
        jQuery("#dessalPrice").val(u.salPrice);
        jQuery("#desmcount").val(u.mcount);
        jQuery("#desmedicineName").val(u.medicineName);
        jQuery("#desmedicineType").val(TYPE[u.medicineType]);
        jQuery("#desdescs").val(u.descs);
        jQuery("#desqualityDate").val(u.qualityDate);
        jQuery("#desdescription").val(u.description);
        jQuery("#desproduceFirm").val(u.produceFirm);
        jQuery("#desreadme").val(u.readme);
        jQuery("#desremark").val(u.remark);
        jQuery("#desModal").modal("show");
    }
    function showEditDialog(u) {
        jQuery("#editmedicineId").val(u.medicineId);
        jQuery("#editinPrice").val(u.inPrice);
        jQuery("#editsalPrice").val(u.salPrice);
        jQuery("#editmcount").val(u.mcount);
        jQuery("#editmedicineName").val(u.medicineName);
        jQuery("#editmedicineType").val(u.medicineType);
        jQuery("#editdescs").val(u.descs);
        jQuery("#editqualityDate").val(u.qualityDate);
        jQuery("#editdescription").val(u.description);
        jQuery("#editproduceFirm").val(u.produceFirm);
        jQuery("#editreadme").val(u.readme);
        jQuery("#editremark").val(u.remark);
        jQuery("#editModal").modal("show");
    }
//更改
    function doEdit() {
        let form=jQuery("#editform").serialize();
        jQuery.post("medicine/edit",form,function (rst) {
            if(rst>0){
                jQuery("#editModal").modal("hide");
                alert("修改成功！");
                init();
            }else {
                alert("修改失败！");
            }
        })
    }
</script>
<script>
    function showdelDialog(u) {
        jQuery("#delmedicineName").html(u.medicineName);
        jQuery("#delmedicineId").val(u.medicineId);
        jQuery("#delModal").modal('show');
    }

    function doDelete() {
        let form=jQuery("#delForm").serialize();
        jQuery.post("medicine/delete",form,function (rst) {
            if(rst>0){
                alert("删除成功！");
                init();
            }else{
                alert("删除失败!");
            }
        })
        jQuery("#delModal").modal("hide");
    }
</script>
<script>
    function selectAll(f) {
        jQuery("input[name='ids']").prop("checked",f);
    }

    function batchDelete() {
        let form=jQuery("#batchform").serialize();
        jQuery.post("medicine/delete",form,function (rst) {
            if(rst>0){
                alert("删除成功！");
                init();
            }else {
                alert("删除失败！");
            }
        })

    }
</script>
</html>